<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 100px;
        }
    </style>
</head>
<body>
    <h1>ToDoList</h1>
    <div id="app">
        <!-- 添加 -->
         <p><input type="text" :value='ipt' v-model='ipt'><button @click='addBtn'>添加</button></p>
        <!-- 未完成 -->
        <h2 @click='undo(1)'>没有完成的项目</h2>
        <div v-if='isShow1' v-for='(item,idx) in lists'>
            <p> <input type="radio" @change='change(idx,1)'> {{item.list}} <button @click='del(idx,1)'>删除</button></p>
        </div>
        <!-- 已完成 -->
        <h2 @click='undo(2)'>已经完成的项目</h2>
        <div v-if='isShow2' v-for='(item,idx) in lists2'>
            <p><input type="radio" @change='change(idx,2)'>{{item.list}} <button @click='del(idx,2)'>删除</button></p>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                ipt:'',
                lists:[],
                lists2:[],
                isShow1:true,
                isShow2:true
            },methods: {
                addBtn(){
                    if(this.ipt == '') return
                    this.lists.push({list:this.ipt})
                    this.ipt=''
                },
                undo(i){
                    (i==1)?(this.isShow1=!this.isShow1):(this.isShow2=!this.isShow2)
                },
                del(idx,i){
                    (i==1) ? this.lists.splice(idx,1):this.lists2.splice(idx,1)
                },
                change(idx,i){
                    if(i==1){
                        this.lists2.push(this.lists[idx])
                        this.lists.splice(idx,1)
                    }else{
                         this.lists.push(this.lists2[idx])
                        this.lists2.splice(idx,1)
                    }
                }
            }
        })
    </script>
</body>
</html>